<template>
  <panel :text='text'>
    <van-button size="mini" slot="right" icon="play" round>播放全部</van-button>
    <!-- <van-swipe :loop="false" :width="width" :show-indicators='false'>
      <van-swipe-item v-for="(songs, index) of songList" :key="index" >
        <div class="songs-wrapper">
          <card v-for="(song, index) of songs"
                :image='song.picUrl'
                :title="song.name"
                :imageWidth='50'
                :imageHeight='50'
                :subTitle='song.singers'
                :key="index"
                class="song"
                direction="row"
          >
          <i slot="row-right" class="iconfont icon-bofang1"/>
          </card>
        </div>
      </van-swipe-item>
    </van-swipe> -->
    <swipe :width='width' :bounce='false'>
      <swipe-item v-for="(songs, index) of songList" :key="index">
        <div class="songs-wrapper">
          <card v-for="(song, index) of songs"
                :image='song.picUrl'
                :imageWidth='50'
                :imageHeight='50'
                :key="index"
                class="song"
                direction="row"
          >
          <i slot="row-right" class="iconfont icon-bofang1"/>
          <div slot="leftContent" class="rank-content">
            <span>{{ song.name }}</span>
            <span class="singers">-{{ song.singers }}</span>
          </div>
          </card>
        </div>
      </swipe-item>
    </swipe>
  </panel>
</template>
<script>
import Swipe from 'base/swipe/swipe'
import SwipeItem from 'base/swipe/swipe-item'
import Card from 'base/card'
import Panel from 'base/panel'
import Song from '@/entity/Song'
import { playlist } from 'api/top'
import { detail } from 'api/playlist'
import {
  detail as getSongDetail,
  // url
} from 'api/song'
import { randomNum } from '@/utils'

export default {
  components: {
    Swipe,
    SwipeItem,
    Card,
    Panel
  },
  props: {
    name: { // 歌曲分类名称
      type: String,
      required: true
    }
  },
  data() {
    return {
      songList: []
    }
  },
  mounted() {
    this.getSongList()
  },
  computed: {
    width() {
      return window.screen.width * 0.9
    },
    text() {
      return this.name
    }
  },
  methods: {
    async getSongList() {
      let res = await playlist({ cat: this.name })

      const { playlists } = res || []

      const randomPlay = playlists[randomNum(0, playlists.length - 1)]

      if (randomPlay) {
        res = await detail({ id: randomPlay.id })
        let { tracks } = res.playlist || []

        let ids = tracks.map(item => item.id).join(',')

        // let songurls = await url(ids)
        let songDetails = await getSongDetail(ids)

        // songurls = songurls.data
        songDetails = songDetails.songs

        let len = songDetails.length
        len = len > 9 ? 9 : len
        for (let index = 0; index < len; index++) {
          const song = new Song(songDetails[index])
          if (index % 3 === 0) {
            this.songList.push([song])
          } else {
            this.songList[this.songList.length - 1].push(song)
          }
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
.recommendCard{
  /deep/ .column-content{
    text-align: left;
  }
}
.songs-wrapper{
  padding-left: 5px;
  .song{
    margin: 10px 0;
  }
}
/deep/ .right{
  width: 70px !important;
}
/deep/ .van-button--mini{
  min-width: 70px;
}
</style>
